
<main class="form-signin w-100 m-auto">
    <%= form_tag sessions_path, method: :post,  authenticity_token: true do %>
        <%= image_tag "logo.png", alt: "logo", class:"mb-3", style: "width: 100px; height: 100px" %>
        <div class="form-floating">
          <%= text_field_tag "username", nil, autofocus: true, autocomplete: "username", class: "form-control", placeholder: "用户名", style: "border-radius:   6px 6px  0 0 !important;"  %>
          <%= label_tag "username", "用户名" %>
        </div>

        <div class="form-floating mb-3">
          <%= password_field_tag "password", nil, autocomplete: "current-password", class: "form-control border-top-0", placeholder: "密码", style: "border-radius:   0 0 6px 6px !important;" %>
          <%= label_tag "password", "密码" %>
        </div>
    <div class="form-floating mb-4">
        <%= submit_tag "登录", class: "w-100 btn btn-lg btn-primary"%>
    </div>
    <div class="flex-md-column">
      <span>没有账号？<%= link_to "注册", new_user_path%></span>
    </div>
    <% end -%>

</main>

<style>
    html,
    body {
        height: 100%;
    }

    body {
        display: flex;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
    }

    .form-signin {
        max-width: 330px;
        padding: 15px;
    }

    .form-signin .form-floating:focus-within {
        z-index: 2;
    }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
</style>